<template>
	<view class="id">
		<slider-verify :isShow="sliderVerifyFLag" @touchSliderResult="verifyResult" ref="verifyElement"></slider-verify>
		<button type="default" @click="btn()">上传图片</button>
		
		<image :src="img" mode=""></image>
		<view class="ic" v-if="list">
			<view v-for="(item,index) in list">{{item.words}}</view>
			</view>
	</view>
</template>

<script>
	import { pathToBase64, base64ToPath } from '../../js_sdk/mmmm-image-tools/index.js'
	import sliderVerify from '@/components/slider-verify/slider-verify.vue';
	export default{
		components: {
		       'slider-verify': sliderVerify
		   },
		data() {
			return {
				sliderVerifyFLag: false,
				img:"",
				list:""
			}
		},
		methods:{
			verifyResult(res) {
					var self= this
				            this.sliderVerifyFLag = false;
				
				            if (res) {  //校验通过
			var timestamp=Math.round(new Date() / 1000)
	
			uni.chooseImage({
			    count: 6, //默认9
			    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有 //从相册选择
			    success: function (res) {
			        // =res.tempFilePaths[0]			
					pathToBase64(res.tempFilePaths[0])
					  .then(base64 => {
					   self.img=base64
	if (res.tempFilePaths.length > 0) {
	            let filePath = res.tempFilePaths[0]
				// console.log(base64)
	                    uniCloud.uploadFile({
	                          filePath: filePath,
	                  cloudPath: `${timestamp}.jpg`,
	                  onUploadProgress: function(progressEvent) {
	                    console.log(progressEvent);
	                    var percentCompleted = Math.round(
	                      (progressEvent.loaded * 100) / progressEvent.total
	                    );
	                          },
	                          success(res) {
								  console.log(res.fileID)
								  uni.request({
									  
								  	url:`http://101.34.54.81:3000/img?img=${res.fileID}`,
								  	method: 'GET',
								  		success(res) {
								  		self.list=res.data.words_result
										// console.log(self.list)
								  		}
								  })
							  },
	                          fail() {},
	                          complete() {}
	                      });
	                  }
					  // console.log(self.img)
				
					  
					  
					  
					  
					  })
					  .catch(error => {
					    console.error(error)
					  })
					
			    }
			});
				            }else{
				                // 校验失败,点击关闭按钮
				            }
				
				
				},
			
			
			
		
			
			btn(){
				
				this.sliderVerifyFLag=true
			
				
			}
		}
	}
</script>

<style>
	.id{
		padding: 20rpx;
		box-sizing: border-box;
	}
	image{
		/* width: 750rpx; */
		width: 710rpx;
		height: 700rpx;
	}
	text{
		/* width: 750rpx; */
		/* height: 40rpx; */
		display: block;
		margin-top: 20rpx;
		/* background: red; */
		padding: 10rpx;
	}
	.ic{
		/* width: 750rpx; */
		padding: 10rpx;
		box-sizing: border-box;
		box-shadow: 8rpx 16rpx 14rpx #c0c0c0;
		overflow: auto;
	}
</style>
